<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>维修工单列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <style type="text/css">
        .tableHead {
            border-top: hidden;
        }

        .searchBox {
            display: flex;
            height: 40px;
            position: fixed;
            top: 45px;
            width: 100%;
            padding: 5px 0;
            background: #fff;
        }
        a{
            text-decoration: none;
        }
        .oahead{
            height: 45px;
            line-height: 45px;
            background: #228bee;
            overflow: hidden;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            color: #fff;
        }
        .searchBox {
            display: flex;
            height: 45px;
            position: fixed;
            top: 45px;
            width: 100%;
            padding: 5px 0;
            background: #fff;
        }
        .btn-blue {
            border: none;
            background: #2a8cec;
            color: #fff;
            width: 14%;
            height: 32px;
            /*margin-top: 5px;*/
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部标签维修工单列表 -->
    <div class="oahead">
      维修工单列表
    </div>
    <div class="searchBox">
    <div style="position: fixed;top: 45px;width: 100%;z-index:1000;background-color: white;">
        <input type="text" placeholder="请输入工单编号 客户名称 设备型号 序列号" class="form-control pull-left input-sm"
               style="width:80%;height: 32px;vertical-align: top;border: 1px solid #cbcbcd;margin-right: 6px;padding-left: 4px;outline: none;margin-left: 4px;margin-top: 5px;"
               v-model="searchParams.key" >
        <button type="button" class="btn btn-blue" style="margin-top: 5px;" @click="isBottomLine=false;searchParams.requestPage=1;getList(false)">查询
        </button>
    </div>
    </div>
    <table class="oa-table " style="position: fixed;top:90px;">
        <thead>
        <tr  class="oa-table-title">
            <th  style="width:65px;">工单编号</th>
            <th style="width:65px;">报修时间</th>
            <th style="width:55px;">客户名称</th>
            <th style="width:65px">设备型号</th>
            <th style="width:65px">序列号</th>
            <th style="width:65px">报修内容</th>
            <th >状态</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table tableHead" style="margin-top:115px;">
        <tbody>
        <tr class="oa-lineOne-H" v-for="(item,i) in list">
            <td style="width:65px" class="oa-lineOne"  @click.stop="showMore($event.target)">
                <a class="oaColor" href="javascript:void(0);" @click="goDetail(item.id,'look');">{{item.consultNo}}</a>
            </td>
            <td style="width:65px" class="oa-lineOne" >{{formatDate(item.createTime)}}</td>
            <td style="width:55px;" class="oa-lineOne" >{{item.customerName}}</td>
            <td style="width:65px" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.deviceModel}}</td>
            <td style="width:65px" class="oa-lineOne" >{{item.sequence}}</td>
            <td style="width:65px" class="oa-lineOne" @click.stop="showMore($event.target)">{{item.repairType}}</td>
            <td  class="oa-lineOne" >{{item.repairStatus}}</td>
        </tr>
        <tr v-if="(!list ||list.length<=0)&&f1==1">
            <td colspan="5" style="margin: 0 auto;color: #999999;text-align: center;padding: 32px;font-size: 16px;background: #fff;border-top: none">
                暂无报修单
            </td>
        </tr>
        </tbody>
    </table>

</div>


<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            isBottomLine:false,
            isLoad: false,
            selectIndex: 0,
            list:[],
            searchParams: {
                userId: getUrlParamObj().userId,
                key: "",
                requestPage: 1,
                pageSize: 40,

            },
            repairKey:'',
            companyList:{},

            selectState: "状态",
            f1:0,
            pageCount:''
        },
        methods: {
            formatDate: function (now) {
                return NewDate(now).Format(TimeFormat.pcListYR);
            },
            setPullRefresh: function (isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if (mydiv.offsetParent === null) {
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                    } else {
                        mydiv.style.display = 'none';
                    }

                } else {
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            getList: function (pushFlag) {
                var that = this;
                console.log(that.searchParams.requestPage)
                if(that.isBottomLine){
                    /* debugger*/
                    /*JSBridge.call(UI, 'showToast', "当前为最后一页")*/
                    return;
                }
                if (that.isLoad) {
                    return;
                } else {
                    that.isLoad = true;
                }
                that.list =[];
                var  url ='/serveRepair/getServeRepairList.json';
                that.showLoading();
                axios({
                    url: url,
                    method: 'post',
                    data: that.searchParams,
                }).then(function (response) {
                    that.f1=1;
                    if (pushFlag ) {
                        that.list =that.list.concat(response.records);
                    } else {
                        that.list = response.records;
                    }
                    that.searchParams.requestPage = that.searchParams.requestPage + 1;
                    that.pageCount=response.pager.pageCount;
                    if(that.searchParams.requestPage>response.pager.pageCount){
                        that.isBottomLine = true;
                    }
                    console.log(that.searchParams.requestPage+that.isBottomLine)
                    that.isLoad = false;
                    that.hideLoading();
                }).catch(function (error) {
                    that.isLoad = false;
                    that.hideLoading();
                })


            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)
            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },
            goDetail: function (id, type) {
                var that = this;
                var url = '';
                var title ='';
                if (that.selectIndex == 0) {
                    title='报修单详情';
                    url = '/page/serve/offGoing.html';
                }

                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    /* title: title,         //顶部标题*/
                    url:  url + '?id=' + id + "&pageType=" + type + "&userId=" + getUrlParamObj().userId,
                    /* showTitleBar: true,     //是否显示标题栏*/
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },

        },
        mounted: function () {
            var that = this;
            that.getList(false);

        },
    });
    window.onscroll = function () {
        var isTop = true
        /*清除，提示框信息*/
        var mydiv = document.getElementById("oa-more");
        if(mydiv!=null){
            mydiv.style.display = 'none';
        }
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        var sum = Math.ceil(scrollTop + windowHeight)
        if (sum >= scrollHeight) {
            //写后台加载数据的函数
            app.getList(true);
            console.log("滚动到底部了");
            if(app.isBottomLine){
                var param = {
                    title: "没有更多数据了..."
                }
                JSBridge.call(UI, 'showToast',param );
            }

        }
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        if (scrollTop === 0) {
            isTop = true
            setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            setScrollTop(false) //非顶部
        }
    }
</script>
<script>
    function NewDate(str){
        if(!str){
            return 0;
        }
        arr=str.split(" ");
        d=arr[0].split("-");
        t=arr[1].split(":");
        var date = new Date();
        date.setUTCFullYear(d[0], d[1] - 1, d[2]);
        date.setUTCHours(t[0]-8, t[1], t[2], 0);
        return date;
    }
    function setScrollTop (isScrollTop) {
        var param = {
            isScrollTop: isScrollTop
        }
       JSBridge.call(UI, 'setScrollTop', param)
    }

</script>
</body>
</html>